<template>
  <div class="question-card">
    <p>{{ index + 1 }}. {{ question.text }}</p>
    <el-radio-group :model-value="modelValue" @update:model-value="updateValue">
      <el-radio :label="'A'">{{ question.A }}</el-radio>
      <el-radio :label="'B'">{{ question.B }}</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'QuestionCard',
  props: {
    question: Object,
    index: Number,
    modelValue: String
  },
  emits: ['update:modelValue'],
  methods: {
    updateValue(val) {
      this.$emit('update:modelValue', val);
    }
  }
};
</script>

<style scoped>
.question-card {
  margin-bottom: 20px;
}
</style>
